<template>
	<view class="AddDetail">
		<view class="head">
			<view class="head_li">
				<uni-icons type="back" size="30" color="#fff" class="icon_back" @click="navigBack"></uni-icons>
				<text>好友申请</text>
			</view>
		</view>
		<view class="body">
			<view class="b_head" @click="NavigatorAdd">
				<image :src="info.avatar"></image>
				<view class="text">
					<view class="one">
						<text>{{info.nickName}}</text>
						<text>({{info.account}})</text>
					</view>
					<view class="label">
						<view class="item"><text>{{info.label}}</text></view>
					</view>
				</view>
				<uni-icons type="forward" size="20" color="#6b6b6b" class="icon"></uni-icons>
			</view>
			<view class="yan">
				<text>对方留言</text>
				<view class="input">
					<input v-model="validate" class="i_put" disabled/>
				</view>
			</view>
			<view class="bei">
				<text>备注</text>
				<view class="input">
					<input v-model="remarks" placeholder="输入备注" class="i_put" placeholder-style="color:#bdbdbd;" />
				</view>
			</view>
		</view>
		<view class="btom">
			<view class="add" @click="Send">同意</view>
		</view>
	</view>
</template>

<script>
	import { getValidate,setFriendAgree,clearRead } from '../../common/api';
	export default {
		data() {
			return {
				info:{},
				uid:null,
				fid:null,
				validate:'',
				remarks:''
			};
		},
		onLoad(val) {
			this.uid = val.uid;
			this.fid = val.fid;
			this.Init();
		},
		methods:{
			Init(){
				getValidate({uid:this.uid,fid:this.fid}).then((res)=>{
					if(res.code == 200){
						this.info = res.data;
						this.validate = res.data.validate;
						this.remarks = this.info.nickName;
					}
				})
			},
			navigBack() {
				uni.navigateBack();
			},
			NavigatorAdd(id){
				uni.navigateTo({
					url: '/subpkg/personal_details/personal_details?fid='+this.info.uid
				})
			},
			Send(){
				setFriendAgree({
					uid:this.uid,
					fid:this.fid,
					remark:this.remarks
				}).then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title: '已同意',
							duration: 1000,
							icon:"none"
						});
						clearRead({
							userId: this.uid,
							cId: res.data
						})
						uni.navigateTo({
							url: '/subpkg/chat_interface/chat_interface?cId='+res.data+'&nickName='+this.remarks
						})	
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.AddDetail {
		.head {
			background: linear-gradient(90deg, rgba(122, 220, 241, 1) 0%, rgba(43, 163, 242, 1) 48%);
			width: 750rpx;
			height: 150rpx;
			position: fixed;

			.head_li {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 120rpx;
				display: flex;
				line-height: 100rpx;
				padding: 0rpx 0rpx;

				text {
					color: #fff;
					font-size: 33rpx;
					opacity: 0.8;
					padding: 18rpx 180rpx;
					display: flex;
					line-height: 80rpx;
				}

				.icon_back {
					padding: 20rpx 30rpx;
				}
			}
		}

		.body {
			width: 750rpx;
			position: fixed;
			top: 150rpx;

			.b_head {
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				&:active{
					background-color: #d5d5d5;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 100rpx;
				}
				.text {
					width: 450rpx;
					display: flex;
					flex-direction: column;
					line-height: 50rpx;
					.one{
						font-size: 38rpx;
						font-weight: bold;
						:nth-of-type(2){
							font-size: 32rpx;
							padding: 0 10rpx;
							font-weight: 400;
						}
					}
					.label{
						display: flex;
						.item{
							margin: 20rpx 15rpx -10rpx 0;
							font-size: 20rpx;
							color: #818181;
							background-color: #dfdfdf;
							border-radius: 10rpx;
							text{
								margin:0 20rpx;
							}
						}
					}
				}
			}

			.yan {
				padding: 20rpx;
				color: #bdbdbd;
				font-size: 28rpx;

				.input {
					width: 700rpx;
					height: 100rpx;
					margin: 20rpx 0;
					background-color: #ededed;
					border-radius: 20rpx;

					.i_put {
						height: 100rpx;
						padding: 0 20rpx;
						color: #4f4f4f;
					}
				}
			}

			.bei {
				padding: 20rpx;
				color: #bdbdbd;
				font-size: 28rpx;

				.input {
					width: 700rpx;
					height: 100rpx;
					margin: 20rpx 0;
					background-color: #ededed;
					border-radius: 20rpx;

					.i_put {
						height: 100rpx;
						padding: 0 20rpx;
						color: #4f4f4f;
					}
				}
			}
		}

		.btom {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 150rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.add {
				background-color: rgba(52, 150, 255, 1.0);
				width: 600rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				border-radius: 10rpx;

				&:active {
					background-color: rgba(48, 131, 255, 1.0);
				}
			}
		}
	}
</style>